﻿
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/pagination.html -->
    <!--<base href="http://webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/" />-->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>搜索+分页</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <link rel="stylesheet" type="text/css" href="http://a.amap.com/amap-ui/static/1.0/ui/misc/MarkerList/examples/pagination.css">

    <style>
        #keywords {
            position: absolute;
            right: 100px;
            top: 7px;
            line-height: 200%;
            padding: 0 5px;
            font-size: 13px;
            border-radius: 3px;
            border: 1px solid #ccc;
            width: 150px;
        }

        #equstate {
            position: absolute;
            right: 320px;
            top: 7px;
            line-height: 200%;
            padding: 0 5px;
            font-size: 13px;
            border-radius: 3px;
            border: 1px solid #ccc;
            width: 150px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="outer-box">
        <div id="container" tabindex="0"></div>
        <select id="equstate" class="form-control">
            <option value="1" selected>设备状态</option>
            <option value="2">安装状态</option>
        </select>
        <input type="text" id="keywords" value="" />
        <!--<div id="panel" class="scrollbar1">
            <ul id="pagination-demo" class="pagination-sm"></ul>
            <ul id="myList"></ul>
        </div>-->
    </div>
    <script type="text/javascript" src="http://webapi.amap.com/ui/1.0/plug/ext/jquery-1.12.4.min.js?v=1.0.11"></script>
    <script src="https://webapi.amap.com/js/marker.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=41f8e244e4aef00fde3cd0c8abdc57b5&plugin=AMap.DistrictSearch"></script>

    <script type="text/javascript">

        var map = new AMap.Map('container', { resizeEnable: true, zoom: 5 });
        var zoom = map.getZoom();

        var markers = []; //province见Demo引用的JS文件

        InitData(zoom);
        function InitData(zoom) {

            $.ajax({
                url: "Login.ashx",
                data: {
                    Action: "GetGISInfo",
                    keyword: $('#keywords').val(),
                    state: $('#equstate').val(),
                    zoom: zoom
                    //pageIndex: page,
                    //pageSize: 5
                },
                type: "post",
                async: false,
                datatype: "json",
                success: function (data) {
                    var dataall = JSON.parse(data);
                    if (dataall.pois != null) {
                        $.each(dataall.pois, function (i) {
                            var marker;
                            var subdata = dataall.pois[i];
                            marker = new AMap.Marker({
                                position: [subdata.location[0].lng, subdata.location[0].lat],
                                title: '',
                                map: map
                            });

                            markers.push(marker);

                        });
                        map.setZoom(zoom);
                        map.setFitView();

                    }
                },
                error: function (msg) {
                    alert('返回数据出错!');
                }
            });
        }


        AMap.event.addListener(map, 'zoomend', function () {
            zoom = map.getZoom();
            //alert(zoom);
            InitData(zoom);
        });
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>

</html>